<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>好听的音乐还在这里 | Z-anime</title>
 <link rel="stylesheet" href="../public/css/swiper.css">
 <link rel="stylesheet" href="../public/css/index/index.css">
 <link rel="stylesheet" href="../public/css/index/foot.css">
 <link rel="stylesheet" href="../public/css/game/head.css">
 <link rel="stylesheet" href="../public/css/music/index.css">
 <link rel="stylesheet" href="../public/css/bootstrap.min.css">
 
 <!--站点图标-->
 <link rel="shortcut icon" href="../public/img/index/logo/logo.ico" type="image/x-icon">
</head>
<body>
  <!--头部-->
  <header id="z_head">
   <div class="head">
       <div class="center">
           <ul id="headUl">
               
           </ul>
           
           <div class="searchInputArea">
             <div class="search_C">
               <input v-model="key" type="search" class="searchInput" placeholder="搜索关键词" @keyup.enter="toSearch">
               <img @click="toSearch" src="../public/img/index/other/search.png">
             </div>        
           </div>
           <img class="logo" src="../public/img/index/logo/logo.png" alt="">
       </div>

   </div>
</header>
<!--头部-->
<!--模板-->
 <div class="filterContainer" id="musicAreaCotanier">
    <div id="musicIndex" style="display: none" :class="['main',viewType==0?'show':'']">
        <div class="url">
            <span id="indexUrl" @click="toIndexClick">Z-anime</span> > 
            <span class="urlTitle">音乐</span>
          </div>
      
          <div class="recommend">
              <div class="text center">每日推荐 ( 10 )</div>
              <section class="pc-banner">   
                  <div class="swiper-container">
                    <div class="swiper-wrapper imgArr hide">
                      
                    </div>
                    <div class="button">
                     <div class="swiper-button-prev"></div>
                     <div class="swiper-button-next"></div>
                    </div>
                  </div>
                </section>
                <div class="clearBoth"></div>
            </div>
          
          <div class="musicList" id="japan">
            <div class="left">
              <div class="text blue musicList_title">日语系列（共有0首歌）</div>
              <div class="musicUl">
      
              </div>
            </div>
            <div class="right">
              <div class="text purple musicList_title">热听榜 Top10</div>
              <div class="musicUl">
      
              </div>
            </div>
          </div>
          <div class="musicList" id="china">
            <div class="left">
              <div class="text blue musicList_title">音乐库（共有0首歌）</div>
              <div class="musicUl">
      
              </div>
            </div>
            <div class="right">
              <div class="text purple musicList_title">热听榜 Top10</div>
              <div class="musicUl">
      
              </div>
            </div>
          </div>
          <div class="musicList hide" id="usa">
            <div class="left">
              <div class="text blue musicList_title">音乐库（共有0首歌）</div>
              <div class="musicUl">
      
              </div>
            </div>
            <div class="right">
              <div class="text purple musicList_title">热听榜 Top10</div>
              <div class="musicUl">
      
              </div>
            </div>
          </div>
    </div>
    <div id="muiscInfo" style="display: none" :class="['main',viewType==1?'show':'']">
        <div class="url">
            <span id="indexUrl" @click="toIndexClick">Z-anime</span> >
            <span id="indexUrl" @click="toMusicClick">音乐</span> > 
            <span id="titleUrl" class="urlTitle"></span>
        </div>

        <div class="mainCotainer">
          <div class="left">
            <div class="leftC">
              <div class="leftCotainer">
                  <div class="imgCotainer">
                      <img :src="musicInfo.imgSrc" alt="">
                      <div class="msk"></div>
                    </div>
              </div>
            </div>
            <div class="content">
              <div class="title"> 

              </div>
              <div class="singer textContent">歌手：<span>

              </span></div>
              <div class="album textContent">所属专辑：<span>

              </span></div>
              <div class="btnGroups">
                <span class="play" @click="playThisMusic(musicInfo)">播放</span>
                <span class="add" @click="addThisMusic(musicInfo)">添加</span>
                <a :href="musicInfo.musicUrl" :download="musicInfo.title + ' - ' +musicInfo.singer + '.mp3'"><span class="download">音乐</span></a>
                <a :href="musicInfo.LyricsUrl" :download="musicInfo.title + ' - ' +musicInfo.singer + '.lrc'"><span class="download">歌词</span></a>
              </div>
              <div class="LyricsCotainer">
                <div class="Lyrics">
              
                </div>
              </div>
              
            </div>
          </div>
          <div class="right">
            <div class="others">
              <div class="othersTitle">相似音乐 <span class="othersTitleafter" @click="musicOthersRandom">More Music</span></div>
              <div class="othersLists">

              </div>
            </div>
          </div>
          <div class="clearBoth"></div>
        </div>
    </div>
   <!--播放器-->
   <audio :src="musicPlayer.musicUrl" id="player_iframe" controls="controls" class="hide" :volume="volume"></audio>
   <div id="musicArea">
     <div class="imgBlackBgC">
       <div class="imgBlackBg" :style="`background:url(${musicPlayer.imgSrc})`"></div>
     </div>
     <div class="imgDiv" @click="toMusicInfo(musicPlayer._id)">
       <img :src="musicPlayer.imgSrc" alt="">
       <div class="msk"></div>
     </div>
     <div id="rightContent">
       <div class="musicTitle">歌曲名 - 歌手</div>
       <div class="album" style="margin-top: 5px;">专辑</div>    
       <div class="musicPlayer">
         <span class="glyphicon glyphicon-play playerIcon" @click="playerClick"></span>
         <div class="progress" @click="toMusicPlay">
           <div class="progressC">
             <div class="progress_bar"></div>
           </div>
           <span class="musicTime">
             <span class="nowTime">00:00</span>
             /
             <span class="allTime">00:00</span>
           </span>
         </div>     
       </div>
       <div class="musicLyc">
         <div class="lycCotainer">
             <div class="lycList">
            
             </div>
         </div>
       </div>
       <span class="slideMove glyphicon glyphicon-chevron-down moveDown" @click="playerHide" title="极简模式"></span>
       <span class="showPlayerList glyphicon glyphicon-eye-close" @click="showPlayerList()" title="隐藏列表"></span>
       <span class="playerListType glyphicon glyphicon-sort" @click="changePlayerType" title="顺序播放" v-if="playerType==1"></span>
       <span class="playerListType glyphicon glyphicon-refresh" @click="changePlayerType" title="循环播放" v-if="playerType==2"></span>
       <span class="playerListType glyphicon glyphicon-random" @click="changePlayerType" title="随缘播放" v-if="playerType==3"></span>
       <span class="addPlayListIcon" @click="addplayerMusic" title="添加至列表"></span>
       <span class="musicVoice">
         <div style="position: relative;">
           <div class="musicVoiceArea" style="display:none">
              <div class="voiceProgress" style="display:none" @click="toVoicePlay">
               <div class="voiceProgressC">
                   <div class="voiceProgressBar"></div>
               </div>
              </div>
           </div>
           <span class="musicVoiceIcon glyphicon glyphicon-volume-up" @click="showVoice" title="音量控制"></span>
           
         </div>
       </span>
     </div>  
   </div>
   <!--极简模式-->
   <div class="moveUp" style="display:none" @click="playerShow">
      <span></span>
      <div class="imgBlackBgC">
       <div class="imgBlackBg" :style="`background:url(${musicPlayer.imgSrc})`"></div>
      </div> 
   </div>
   <!--播放列表-->
   <div id="playerList" class="playerListContainer">
     <div class="imgBlackBgC">
       <div class="imgBlackBg" :style="`background:url(${musicPlayer.imgSrc})`"></div>
     </div>
     <div class="playerTitle" title="点我拖动" id="movePlayer">
       播放列表
     <span class="glyphicon glyphicon glyphicon-headphones"></span>
     </div>
     <div class="playerLists" data-mcs-theme="minimal-dark">
        <ul id="musicAll">

        </ul>
     </div>
     <div class="playerTitle" v-if="playerList.length==0">
       请添加音乐
       <span class="glyphicon glyphicon glyphicon-chevron-up showBack" @click="hidePlayerLists"></span>
      </div>
     <div class="playerTitle" id="playerTitle" v-else>
        <span class="glyphicon glyphicon-trash delete deleteAll" @click="deleteAllPlayerLists">一键清除</span>
        <span class="glyphicon glyphicon glyphicon-chevron-up showBack" @click="hidePlayerLists"></span>
     </div>
     
   </div>
 </div>
<!--筛选-->

<!--尾部-->
<footer id="z_foot">
    <div class="foot">
        <div class="foot_left"></div>
        <div class="foot_center">
            <span
                class="main_txt">本站所有资源来源于各大视频网站,只供网络测试和学习交流所用,不提供影片资源存储，也不参与任何视频录制、上传,所有视频版权归原权利人，如有关视频侵犯了你的权益，请联系告之，我们将于第一时间删除！我们建议所有影视爱好者购买正版音像制品或去电影院观看最新大片。网站合作联系方式：810268796@qq.com
                Copyright <a href="#">Z动漫在线</a> All Rights Reserved</span>
        </div>
        <div class="foot_right"></div>
    </div>
  </footer>
  <!--尾部-->
s
  <script src="../public/js/jquery-1.12.4.min.js"></script>
  <script src="../public/js/vue.js"></script>
  <script src="../public/js/vue-resource.min.js"></script>
  <script type="text/javascript" src="../public/js/swiper.min.js"></script>
  <script src="../public/js/lyric.js"></script>
  <script src="../public/js/common.js"></script>
  <script src="../public/js/index/head.js"></script>
  <script src="../public/js/music/musicArea.js"></script>
  
</body>
</html>